<template>
  <fu-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" :border-radius="24">
    <view class="padding">
      <view class="flex justify-between padding-bottom">
        <view class="flex-sub text-center">地址</view>
        <view class="close-box" @tap="close">
          <text class="cuIcon-close"></text>
        </view>
      </view>
      <scroll-view class="container" scroll-y>
        <block v-for="(item,index) in addrs" :key="item.address_id">

          <view class="align-center padding-sm address-box"  @click="selectAddress(item,index)">
            
            <view class="margin-right-sm text-999" :class="{'fu-cred': curTab == item.address_id}">
              <text class="cuIcon-locationfill"></text>
            </view>
            <view class="address-mian">
              <view class="address-name">
                <text class="text-bold text-df">收货人：</text>
                <text class="text-df">{{ item.name }}</text>
              </view>
              <view class="address-phone">
                <text class="text-bold text-df">手机号：</text>
                <text class="text-df">{{ item.mobile }}</text>
              </view>
              <view class="text-df address-ad">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
            </view>
          </view>

        </block>
      </scroll-view>
    </view>
  </fu-popup>
</template>

<script>
	export default {
    props: {
      addrs: {
        type: Array,
        required:true,
        default(){
          return []
        }
      },
    },
		data() {
			return {
        show: false,
        curTab: 0,
			};
		},
    watch: {
      addrs(val){
        console.log('val',val)
        if(val.length != 0){
          let cur = val.find(item => item.is_default == 1);
          if(cur){
            this.curTab = cur.address_id;
            this.$emit('change',cur);
          }else{
            this.curTab = val[0].address_id;
            this.$emit('change',val[0]);
          }
        }
      },
    },
    methods: {
      open(){
        this.show = true;
      },
      close(){
        this.show = false;
      },
      selectAddress(item,index){
        this.curTab = this.addrs[index].address_id;
        this.$emit('changeAddress',item);
        this.close();
      },
      chooseOther(){
        this.close();
      }
    },
	}
</script>

<style lang="scss" scoped>
.address-box {
  display: flex;
  .address-mian {
    .address-name {
      
    }
    .address-phone {

    }
    .address-ad {

    }
  }
}
  .container{
    height: 600rpx;
  }
  .text-999{
    color: #999999;
  }
  .current {
    color: #ff0000;
  }
</style>
